<template>
	<div class="stepBarDiv">
		<div class="stepBar">
      <div v-for="(item, i) in stepList" :key="i" class="stepDiv">
				<img :src="getInfo(i+1).src"/>
				<div :class="getInfo(i+1).tClass">{{item}}</div>
      </div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "stepBar",
		props: {
			step: {
				type: Number
			},
      stepList: {
        type: Array
      }
		},
    methods: {
      getInfo(num) {
        if(num >= this.step && this.step != this.stepList.length){
          return {
            src: this.step == num ? require(`@/assets/image/stepBar/step${num}.png`) : require(`@/assets/image/stepBar/step${num}grey.png`),
            tClass: this.step == num ? 'stepTitle stepTitleDone' : 'stepTitle'
          }
        } else {
          return {
            src: require('@/assets/image/stepBar/stepFinish.png'),
            tClass: 'stepTitle stepTitleDone'
          }
        }
      }
    },
	}
</script>

<style scoped lang="scss">
.stepBarDiv {
  display: flex;
  justify-content: center;
  .stepBar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    border-bottom: 1px dashed #d9d9d9;
    overflow: hidden;
    .stepDiv {
      display: flex;
      justify-content: center;
      flex-direction: column;
      img {
        width: 250px;
        height: 42px;
      }
      .stepTitle {
        margin: 10px;
        font-size: 14px;
        color: #333;
        &.stepTitleDone {
          color: #045db9;
        }
      }
    }
  }
}
</style>
